<template>
	<view style="background-color: #F9F9F9;">

	
		<view v-for="(item,jIndex) in jishiList" :key="jIndex">
			<view class="item_box">
				<image :src="item.avatar ? item.avatar:'/static/logo.png'" mode="aspectFill" class="item_imgBox">
				</image>
				<view class="item_right" style="width: 70%;">
					<view class="" style="display: flex;justify-content: space-between;">
						<view class="item_title">{{item.name}} <span style="font-weight: bold;color:rgb(251,133,0);margin-left: 15rpx;">￥{{item.finalPrice}}</span> </view>
						<view class="" style="display: flex;align-items: center;font-size: 24rpx;margin-right: 15rpx;">
							<view style="padding: 5rpx 8rpx;border: #4578F7 solid 1rpx;border-radius:10rpx 0 0 10rpx;border-right: none;color: #4578F7;">
								今日可约
							</view>
							<view
								style="padding: 5rpx 8rpx;background-color:#4578F7;border-radius:0 10rpx 10rpx 0;border: #4578F7 solid 1rpx;color: #fff;">
								{{time}}
							</view>
						</view>
					</view>
					<view class="" style="display: flex;justify-content: space-between;align-items: center;">
						<view class="item_span" style="margin-top: 15rpx;">
							<span>{{item.age ?item.age :25 }}岁</span>
							<span>{{item.registeredResidence ?item.registeredResidence:'重庆人' }}</span>
							<span v-if="item.professionalCertification">{{item.professionalCertification}}</span>
						</view>
						<view class="" style="display: flex;align-items: center;margin-right: 15rpx;margin-top: 10rpx;">
							<view style="font-size: 24rpx;color: #4578F7;">
								距离:
							</view>
							<u-icon name="map" color="#4578F7" size="24"></u-icon>
							<view style="font-size: 24rpx;color: #4578F7;margin-left:5rpx;">
								{{item.params.juLi}}km
							</view>
						</view>
					</view>
					<view class="item_pin" style="color: #999999;margin-top: 8rpx;">
						<span>累计服务{{item.num}}单</span>
						<span style="margin-left: 15rpx;color: #F9A67D;">{{item.score}}分</span>
					</view>
					<view class="" style="display: flex;justify-content: space-between;margin-top: 10rpx;">
						<view class="" style="display: flex;">
							<view class="" style="display: flex;align-items: center;">
								<u-icon name="star-fill" @tap.stop="changeGuanchu(item,2)" color="#E24449" size="32"
									v-if="item.interest==1"></u-icon>
								<u-icon name="star" @tap.stop="changeGuanchu(item,1)" color="#999999" size="32"
									v-else></u-icon>
								<view style="font-size: 24rpx;color: #999999;margin-left: 5rpx;">
									关注 {{item.interestCount ? item.interestCount:0}}
								</view>
							</view>
							<view class="" style="display: flex;align-items: center;margin-left: 15rpx;">
								<u-icon name="heart" color="#999999" size="32" @tap="changeLike(item,1)"
									v-if="item.isLike!=1"></u-icon>
								<u-icon name="heart-fill" color="#E24449" @tap="changeLike(item,2)" size="32"
									v-if="item.isLike==1"></u-icon>
								<view style="font-size: 24rpx;color: #999999;margin-left: 5rpx;">
									点赞 {{item.fans ? item.fans:0}}
								</view>
							</view>
						</view>
						<view class="xuanze_bt" @tap="goDetail(item,item.params.zuiZao)">选择服务</view>
					</view>
				</view>



				<!-- 
		<view v-for="(item,jIndex) in jishiList" :key="jIndex" @tap="goDetail(item,item.params.zuiZao)">
			<view class="item_box">
				<image :src="item.avatar" mode="aspectFill" class="item_imgBox"></image>
				<view class="item_right">
					<view class="" style="display: flex;justify-content: space-between;width: 500rpx;">
						<view class="item_title">{{item.name}}</view>
						<view class="" style="display: flex;align-items: center;font-size: 24rpx;margin-right: 15rpx;">
							<view
								style="padding: 5rpx 8rpx;border: #4578F7 solid 1rpx;border-radius:10rpx 0 0 10rpx;border-right: none;color: #4578F7;">
								今日可约
							</view>
							<view
								style="padding: 5rpx 8rpx;background-color:#4578F7;border-radius:0 10rpx 10rpx 0;border: #4578F7 solid 1rpx;color: #fff;">
								{{time}}
							</view>
						</view>
					</view>
					<view class=""
						style="display: flex;justify-content: space-between;width: 500rpx;align-items: center;">
						<view class="item_span" style="margin-top: 15rpx;">
							<span>{{item.age ?item.age :25 }}岁</span>
							<span>{{item.registeredResidence ?item.registeredResidence:'重庆人' }}</span>
							<span>{{item.professionalCertification ? item.professionalCertification:'保健师'}}</span>
						</view>
						<view class="" style="display: flex;align-items: center;margin-right: 15rpx;margin-top: 10rpx;">
							<view style="font-size: 24rpx;color: #4578F7;">
								距离：
							</view>
							<u-icon name="map" color="#4578F7" size="24"></u-icon>
							<view style="font-size: 24rpx;color: #4578F7;margin-left:5rpx;">
								{{item.params.juLi}}km
							</view>
						</view>
					</view>
					<view class="item_pin" style="margin-top: 15rpx;color: #999999;">
						<u-rate :count="count" active-color="#4578F7" v-model="item.score" size="24"></u-rate>
						<span style="margin-left: 15rpx;">评论{{item.num}}</span>
						<span style="margin-left: 15rpx;">好评{{item.scope}}%</span>
					</view>
					<view class="item_pintext" style="margin-top: 15rpx;">
						{{item.des}}
					</view>
					<view class=""
						style="display: flex;justify-content: space-between;width: 500rpx;margin-top: 15rpx;">
						<view class="" style="display: flex;align-items: center;">
							<u-icon name="home-fill" color="#999999" size="24"></u-icon>
							<view style="font-size: 24rpx;color: #999999;margin-left: 10rpx;">
								百吉星社工
							</view>
						</view>
					</view>
				</view> -->
			</view>
		</view>
	</view>



	<!-- 	<view class="u-m-t-25 u-p-b-25">
		<u-loadmore :status="loadText" />
	</view> -->

	</view>


</template>
<script>
	import store from "@/store/index.js"
	export default {
		data() {
			return {
				// #ifdef MP-WEIXIN
				marginR: 180,
				weixin: true,
				// #endif
				// #ifdef APP-PLUS
				weixin: false,
				// #endif
				goodsid: "",
				jishiList: [],

				select: {
					showOpa: 0,
					myOpa: 0,
					myOpa1: 0,
					myOpa2: 0,
					myOpa3: 0,
					screenH: null,
					cityIndex: 0,
					juLiIndex: 0,
					times: ""
				},
				cityList: [{
					name: "全城",
					id: 0
				}],
				juLiList: [{
						juLi: "不限距离",
						value: 999,
						id: "j1"
					}, //id用于v-for的key
				],
				timeList: [],
				time: '',
				params: {},
				orderType: store.state.orderType,
				loadText: "loadmore",
				pageNum: 1
			}
		},
		onNavigationBarButtonTap: function(e) {
			//console.log(JSON.stringify(e))
		},
		onLoad(option) {
			this.goodsid = option.goodsid || "";
			this.addJuliList(); //距离列表
			this.addTimeList(); //时间列表
			this.getCityList(); //城市列表
			let rpx = this.$store.state.sysInfo.windowHeight / (uni.upx2px(100) / 100);
			this.select.screenH = rpx; //获得屏幕高度，单位为rpx
			// // //console.log("load")
		},
		onShow() {
			// this.jishiList=[];
			// this.httpRequest();
			this.time = this.accessTimeInAnHour()
			this.jishiList = [];
			this.httpRequest(this.params);
		},
		onReachBottom() {
			this.pageNum++
			this.httpRequest()
		},
		methods: {
			changeGuanchu(e, i) {
				let that = this
				if (i == 1) {
					this.$request("worker/interest/add", {
						workerId: e.id
					}).then(res => {
						//console.log("like",res)
						if (res.msg == '操作成功') {
							uni.showToast({
								title: '关注成功',
								icon: 'none'
							})
							setTimeout(() => {
								that.httpRequest()
							}, 1000)
						}
					});
				} else {
					this.$request("worker/interest/delete", {
						workerId: e.id
					}).then(res => {
						//console.log("like",res)
						if (res.msg == '操作成功') {
							uni.showToast({
								title: '取消关注',
								icon: 'none'
							})
							setTimeout(() => {
								that.httpRequest()
							}, 1000)
						}
					});
				}

			},
			changeLike(e, i) {
				let that = this
				this.$request("kehu/other/likeWorker", {
					wid: e.id
				}).then(res => {
					//console.log("like",res)
					if (res.msg == '操作成功') {
						if (i == 1) {
							uni.showToast({
								title: '点赞成功',
								icon: 'none'
							})
						} else {
							uni.showToast({
								title: '取消点赞',
								icon: 'none'
							})
						}
						setTimeout(() => {
							that.httpRequest()
						}, 1000)
					}
				});
			},






			//获取一小时后的日期  时间
			accessTimeInAnHour() {
				var date = new Date();
				var date1 = new Date().getTime(); // 获取当前时间戳
				// 当前时间戳+3600s（一小时，其他时间通过计算时间戳进行相应加减），重新设置 Date 对象
				date.setTime(date1 + 3600000);
				return this.zeroPadd(date);
			},

			//日期时间补0
			zeroPadd(date) {
				var hours = date.getHours(); // 获取时
				var minutes = date.getMinutes(); // 获取分
				var seperator1 = "-"; // 自定义日期分隔符
				var year = date.getFullYear(); // 获取年
				var month = date.getMonth() + 1; // 获取月
				var strDate = date.getDate(); // 获取日

				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				if (hours >= 0 && hours <= 9) {
					hours = "0" + hours;
				}
				if (minutes >= 0 && minutes <= 9) {
					minutes = "0" + minutes;
				}

				var time = hours + ":" + minutes; // 时分
				var currentdate = year + seperator1 + month + seperator1 + strDate; // 年月日
				var date = time
				return date;
			},
			search() {
				uni.navigateTo({
					url: "search?iid=" + this.goodsid
				})
			},
			goBack() { //返回上一页
				uni.navigateBack({
					delta: 1
				})
			},
			addTimeList() { //时段列表
				this.$request("timeXxConfig/time/list").then(res => {
					this.timeList = res.rows
					this.timeList.forEach((item, i) => {
						item.selected = false
					})
					this.timeList = JSON.parse(JSON.stringify(this.timeList))
				});
			},
			clearChoose(flag) { //把选择的城市或时间或距离清空(因为多条件会报错)
				//flag用于判断是否清空时间，选择全城和距离是要清空的，选择时段则不清空
				this.params.cityId = 0; //全城(默认)
				this.params.fanWei = 999; //距离(默认)
				this.params.times = ""; //时间(默认)
				this.select.cityIndex = 0;
				this.select.juLiIndex = 0;
				if (flag === 1) {
					this.timeList.forEach((item) => { //重置所有
						item.selected = false;
					})
				}
			},
			addJuliList() {
				for (let i = 5, j = 2; i <= 25; i++, j++) {
					this.juLiList.push({
						juLi: i + "KM",
						value: i,
						id: "j" + j
					})
				}
			},
			getCityList() {
				this.$request("common/getCityList").then(res => {
					//console.log(res)
					this.cityList.push(...res.data)
				})
			},
			changeCity(index) { //切换城市
				this.clearChoose(1);
				this.select.cityIndex = index;
				this.switchSelect(4);
				this.jishiList = []
				//发起请求
				this.params.cityId = this.cityList[this.select.cityIndex].id
				this.httpRequest(this.params)
			},
			changeJuli(index) { //切换距离
				this.clearChoose(1);
				this.select.juLiIndex = index;
				this.switchSelect(4);
				this.jishiList = []
				//发起请求
				this.params.fanWei = this.juLiList[index].value
				//console.log("params",this.params)
				this.httpRequest(this.params)
			},
			changeTime(index) { //切换服务时段
				this.clearChoose(2);
				this.timeList[index].selected = !this.timeList[index].selected;
				// this.select.times=index;
			},
			changeFilter() { //切换筛选

			},
			upTimes() { //发起请求
				var orderName = ""
				for (var i = 0; i < this.timeList.length; i++) {
					var time = this.timeList[i]
					if (time.selected) {
						orderName = (orderName.length <= 0 ? "" : (orderName + ",")) + time.id
					}
				}
				this.params.tcIds = orderName
				this.jishiList = []
				this.httpRequest(this.params)
			},
			switchSelect(num) { //用于切换选择列表是否显示
				if (num === 0) { //点击了全城
					this.select.myOpa2 = this.select.myOpa1 = this.select.myOpa3 = 0;
					this.select.myOpa = this.select.showOpa = this.select.myOpa === 0 ? 1 : 0;
				} else if (num === 1) { //点击了距离优先
					this.select.myOpa2 = this.select.myOpa = this.select.myOpa3 = 0;
					this.select.myOpa1 = this.select.showOpa = this.select.myOpa1 === 0 ? 1 : 0;
				} else if (num === 2) { //点击了服务时段
					let tempOpa = this.select.myOpa2; //先保存，防止覆盖
					this.select.myOpa = this.select.myOpa1 = this.select.myOpa3 = 0;
					this.select.myOpa2 = this.select.showOpa = this.select.myOpa2 === 0 ? 1 : 0;
					if (tempOpa === 1) { //因为是多选，需要单独处理
						this.upTimes()
					}
				} else if (num === 3) { //点击了筛选
					this.select.myOpa2 = this.select.myOpa = this.select.myOpa1 = 0;
					this.select.myOpa3 = this.select.showOpa = this.select.myOpa3 === 0 ? 1 : 0;
				} else { //点击遮罩层(不管是哪个下拉列表出现都可以关闭)
					let tempOpa = this.select.myOpa2; //先保存，防止覆盖
					this.select.myOpa2 = this.select.myOpa1 = this.select.myOpa = this.select.showOpa = 0;
					if (tempOpa === 1) { //因为是多选，需要单独处理
						this.upTimes()
					}
				}
			},
			httpRequest(params) {
				params.iid = this.goodsid;
				params.pageNum = this.pageNum
				params.pageSize = 10
				this.$request("kehu/jishi/jiShiList", params).then(res => {
					if (this.pageNum > 1) {
						if (res.data.length > 0) {
							this.jishiList = this.jishiList.concat(res.data)
						} else {
							uni.showToast({
								title: '暂无数据',
								icon: 'none'
							})
							this.pageNum = this.pageNum - 1; //请求下一页
						}
					} else {
						this.jishiList = res.data
					}
				});
				this.loadText = "nomore"
				uni.hideLoading();
			},

			goDetail(e, zuiZao) {
				if (e.status === 0) {
					uni.showToast({
						title: '该社工今天休息',
						icon: 'none'
					})
					return
				}

				if (this.goodsid !== "") {
					let option = JSON.stringify({
						goodsid: this.goodsid,
						jishiId: e.id,
						zuiZao
					});
					//console.log("option",option)
					let mood = null
					let itemMood = null

					this.$store.commit("setmood", mood);
					this.$store.commit("setitemMood", itemMood);
					uni.navigateTo({
						url: '../order/order_submit?option=' + option+'&wid='+e.id
					})
				}

			}
		},
		computed: {
			statusBarHeight() {
				return this.$store.state.sysInfo.statusBarHeight
			}
		}
	};
</script>

<style lang="scss" scoped>
	.xuanze_bt {
		width: 150rpx;
		height: 60rpx;
		color: #fff;
		border-radius: 30rpx;
		font-size: 28rpx;
		text-align: center;
		line-height: 60rpx;
		background: linear-gradient(#2869FE, #b9c8ff);
		margin-right: 7rpx;
	}

	.item_pin {
		margin-top: 8rpx;
		font-size: 24rpx;
	}

	.item_right {
		margin-left: 15rpx;
	}

	.item_box {
		width: 710rpx;
		margin-left: 20rpx;
		margin-top: 25rpx;
		display: flex;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		padding: 15rpx;
	}

	.item_imgBox {
		width: 200rpx;
		height: 200rpx;
		border-radius: 16rpx;
		margin-left: 7rpx;
		margin-right: 10rpx;
		border-radius: 50%;
	}

	.item_span span {
		padding: 5rpx 8rpx;
		background-color: #D9EAFF;
		font-size: 24rpx;
		margin-right: 15rpx;
		border-radius: 10rpx;
		color: #2869FE;

	}

	.item_span {
		margin-top: 5rpx;
	}

	.item_title {
		font-size: 36rpx;
		font-weight: 600;
	}

	.item_pintext {
		margin-top: 8rpx;
		font-size: 24rpx;
		width: 450rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #999999;
	}












	.item_dibuOne {
		width: 120rpx;
		background-color: #4578F7;
		color: #fff;
		font-size: 25rpx;
		height: 40rpx;
		line-height: 37rpx;
		text-align: center;
		border-radius: 30rpx;
	}

	.item_liji {
		width: 120rpx;
		background-color: #4578F7;
		color: #fff;
		font-size: 25rpx;
		height: 60rpx;
		line-height: 57rpx;
		text-align: center;
		border-radius: 15rpx;
		margin-top: -10rpx;
	}

	.item_box {
		width: 730rpx;
		margin-left: 10rpx;
		margin-top: 30rpx;
		background-color: #fff;
		border-radius: 10rpx;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		padding-bottom: 30rpx;
	}

	.item_top {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.item_topleft {
		width: 40rpx;
		height: 56rpx;
		margin-left: 2%;
		z-index: 1;
	}

	.item_topright {
		padding: 10rpx 20rpx;
		background-color: #4578F7;
		color: #fff;
		font-size: 24rpx;
		border-radius: 0 10rpx 0 10rpx;
	}

	.item_zhong {
		width: 96%;
		margin-left: 2%;
		display: flex;
		margin-top: -24rpx;
	}

	.item_flx {
		display: flex;
		align-items: end;
		margin-left: 18rpx;
	}

	.item_flxTitle {
		font-weight: 600;
		font-size: 36rpx;
	}

	.item_xinxin {
		display: flex;
		font-size: 24rpx;
		color: #FFBE0C;
		margin-left: 10rpx;
		margin-top: 8rpx;
	}

	.item_des {
		font-size: 28rpx;
		margin-top: 20rpx;
		margin-left: 18rpx;
		margin-top: 24rpx;
		color: #a3a3a3;
	}

	.item_xxx {
		width: 83%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.item_xxxFlx {
		display: flex;
		align-items: center;
	}

	.item_dibu {
		width: 96%;
		margin-left: 2%;
		display: flex;
		margin-top: 17rpx;
		justify-content: space-between;
	}

	.item_dibufLX {
		display: flex;
		color: #bfbfbf;
	}
</style>